[#assign title]排行榜[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>
    .rank-wrapper {
        background: url("/static/images/customer/wrapper-line.png");
        background-size: 100%;
        margin: -10px -15px 0px -15px;
        line-height: 1;
    }

    .rank-wrapper-background-head {
        background: url("/static/images/customer/wrapper-head.png") no-repeat;
        background-size: 100%;
        padding: 0 2.5%;
    }

    .rank-wrapper-background-footer {
        width: 100%;
    }

    .rank-wrapper .rank-content {
        margin-top: 60%;
        margin-bottom: 6px;
    }

    .rank-wrapper .rank-content .head {
        width: 40%;
    }

    .rank-wrapper .rank-content.first .head {
        width: 57%;
        margin-top: -16%;
    }

    .rank-wrapper .rank-content .caption {
        padding: 20px 5px 0 5px;
    }

    .rank-wrapper .rank-content p {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .rank-wrapper .rank-content .nickname {
        overflow: hidden;
        word-break: keep-all; /* 不换行 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        padding-bottom: 10px;
        font-size: 1.25rem;
    }
</style>
[/#macro]
[#macro body]
<div class="rank-wrapper">
    <div class="rank-wrapper-background-head">
        <div class="row no-gutters text-center">
            <div class="col-4">
                <div class="rank-content">
                    <img class="rounded-circle head" :src="second.head | headImg"/>
                    <div class="caption">
                        <p class="nickname">{{second.nickname}}</p>
                        <p class="pb-2 text-danger">{{second.sumTotal}}</p>
                        <p class="text-muted">累计开局</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="rank-content first">
                    <img class="rounded-circle head" :src="first.head | headImg"/>
                    <div class="caption">
                        <p class="nickname">{{first.nickname}}</p>
                        <p class="pb-2 text-danger">{{first.sumTotal}}</p>
                        <p class="text-muted">累计开局</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="rank-content">
                    <img class="rounded-circle head" :src="third.head | headImg"/>
                    <div class="caption">
                        <p class="nickname">{{third.nickname}}</p>
                        <p class="pb-2 text-danger">{{third.sumTotal}}</p>
                        <p class="text-muted">累计开局</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img class="rank-wrapper-background-footer" src="/static/images/customer/wrapper-footer.png"/>
</div>
<div class="row">
    <div class="col-12 mt-1 d-flex justify-content-between">
        <pre class="text-muted">每周一零点重置排行榜</pre>
        <pre class="text-muted">{{sysdate | formatFullDate}}</pre>
    </div>
</div>
<div class="row">
    <div class="col-12 pre-scrollable"
         :style="{'max-height': recordHeight}">
        <div class="media scrollable-border py-1" v-for="(data, index) in list">
            <div class="m-auto" style="width: 2rem">{{index + 4}}</div>
            <img class="mr-2" :src="data.head | headImg" :alt="data.nickname"/>
            <div class="media-body">
                <div class="d-flex justify-content-between">
                    <span>{{data.nickname}}</span>
                    <span class="d-flex align-items-center text-danger">{{data.sumTotal}}</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span class="text-muted">
                        今日开局
                        <span class="text-danger">{{data.dayTotal}}</span>
                        次
                    </span>
                    <span class="text-muted">累计开局</span>
                </div>
            </div>
        </div>
    </div>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            sysdate: new Date().getTime(),
            topList: [],
            list: [],
            noneUser: {
                nickname: '无人上榜',
                sumTotal: 0,
                dayTotal: 0
            },
            recordHeight: '0px'
        },
        methods: {
            /** 计算记录面板高度 */
            calcRecordHeight: function () {
                var vm = this;
                vm.$nextTick(function () {
                    vm.recordHeight = vm.calcScrollHeight('.pre-scrollable') + 'px';
                });
            },
            refresh: function () {
                var vm = this;
                axios.post('/rank/list').then(function (response) {
                    var data = response.data;
                    if (data && data.length >= 3) {
                        vm.topList = data.slice(0, 3);
                        vm.list = data.slice(3);
                    } else {
                        vm.topList = data;
                    }
                    vm.calcRecordHeight();
                }).catch(function (err) {
                });
            },
            refreshDate: function () {
                var vm = app;
                vm.sysdate += 1000;
                setTimeout(vm.refreshDate, 1000);
            }
        },
        computed: {
            first: function () {
                var first = this.topList && this.topList.length > 0 ? this.topList[0] : this.noneUser;
                return first;
            },
            second: function () {
                var second = this.topList && this.topList.length > 1 ? this.topList[1] : this.noneUser;
                return second;
            },
            third: function () {
                var third = this.topList && this.topList.length > 2 ? this.topList[2] : this.noneUser;
                return third;
            }
        },
        watch: {},
        mounted: function () {
            var vm = this;
            vm.refresh();
            axios.get('/sysdate').then(function (response) {
                vm.sysdate = response.data;
                vm.refreshDate();
            }).catch(function (err) {
            });
        }
    });
</script>
[/#macro]